<template>
  <div>
    <span :class="position === 'left' && isDiff ? tipsClass : []">{{leftNum}}</span>
    <slot name="space" v-if="$slots.space"></slot>
    <span v-else>{{space}}</span>
    <span :class="position === 'right' && isDiff ? tipsClass : []">{{rightNum}}</span>
  </div>
</template>

<script>
export default {
  name: 'Num2',
  props: {
    leftNum: {
      required: true,
    },
    rightNum: {
      required: true,
    },
    space: {
      type: String,
      default: '/'
    }, // 中间的符号
    position: {
      type: String,
      default: 'left'
    }, // 左边数字还是右边数据换样式
    tipsClass: {
      type: Array,
      default: () => {
        return [
          'font-red'
        ]
      }
    }
  },
  computed: {
    // 是否不一样
    isDiff(){
      return Number(this.leftNum) !== Number(this.rightNum)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
